<template>
	<view>
		<view class="container">
			<view class="stall" v-for="(item,index) in stall" :key='index' @click="select(item)">
				<image src="../../static/image/chewei_active.png" mode="" v-if="item.status == 1"></image>
				<image src="../../static/image/chewei.png" mode="" v-if="item.status==0"></image>
			</view>
		</view>
		<view class="tips">
			<view class="icon">
				<view class="gray">
				</view>
				<text>在售</text>
			</view>
			<view class="icon ">
				<view class="blue">
				</view>
				<text>已售</text>
			</view>
		</view>
		<!-- 选择时间 -->
		<view class="time">
			<!-- 开始时间 -->
			<view class="start" @click="showstart = true">
				<u-picker v-model="showstart" mode="time" :params="params" @confirm='confirmStart'></u-picker>
				<view class="beforeStart" v-if="start_time=='' ">
					开始时间
				</view>
				<view class="afterStart" v-else>
					<view class="HM">
						{{startTimeHM}}
					</view>
					<view class="year">
						{{startTimeY}}
					</view>
					<view class="MD">
						{{startTimeMD}}
					</view>
				</view>
			</view>
			<view class="">
				---
			</view>
			<!-- 结束时间 -->
			<view class="end" @click="showend = true">
				<u-picker v-model="showend" mode="time" :params="params" @confirm="confirmEnd"
					:default-time="defaultEndTime">
				</u-picker>
				<view class="beforeEnd" v-if="end_time=='' ">
					结束时间
				</view>
				<view class="afterEnd" v-else>
					<view class="HM">
						{{endTimeHM}}
					</view>
					<view class="year">
						{{endTimeY}}
					</view>
					<view class="MD">
						{{endTimeMD}}
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="info" v-if='selection'>
				<view class="stallInfo">
					<view class="stall">
						{{selection}}
					</view>
					<view class="text">
						车位类型: 标准车位
					</view>
				</view>
				<view class="minus" @click="minus">
					<image src="../../static/image/minus.png" mode=""></image>
				</view>
			</view>
			<u-button type="primary" class="button" @click="gotoStall">
				选择车位
			</u-button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 开始时间
				start_time: '',
				startTimeHM: '',
				startTimeY: '',
				startTimeMD: '',
				startParams: '',
				// 结束时间
				end_time: '',
				endTimeHM: '',
				endTimeY: '',
				endTimeMD: '',
				showstart: false,
				showend: false,
				// 所有车位
				stall: [],
				// 已经预定的车位
				stallActive: [],
				// 未预定的车位
				stallNotActive: [],
				// 选择预定的车位
				selection: '',
				// 时间参数
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				defaultEndTime: '',
			}
		},
		methods: {
			// 获取车位信息
			getStall() {
				this.$u.api.initialPark().then(res => {
					// console.log(res)
					this.stall = res.data
					this.stall.forEach(value => {
						if (value.status == 1) {
							this.stallActive.splice(0, 0, value.park_num)
						} else {
							this.stallNotActive.splice(0, 0, value.park_num)
						}
					})
				})
			},
			// 选择车位
			select(item) {
				if (this.start_time == '' || this.end_time == '') {
					this.selection = "请先选择时间"
					return
				}
				// 将所有未预定和未被选中的车位设为未激活状态
				for (let i = 0; i < this.stall.length; i++) {
					if (this.stallActive.indexOf(this.stall[i].park_num) == -1 && this.stall[i].park_num !== item
						.park_num) {
						this.stall[i].status = 0
					}
				}
				// 选择已经被预定的车位
				if (this.stallActive.indexOf(item.park_num) !== -1) {
					this.selection = "该车位已被预定"
					// return
				}
				// 再次点击相同车位
				else if (this.selection == item.park_num) {
					this.selection = ''
					// item.active = !item.active
					if (item.status == 1) {
						item.status = 0
					} else {
						item.status = 1
					}
					// return
				}
				// 激活被选择的车位
				else {
					if (item.status == 1) {
						item.status = 0
					} else {
						item.status = 1
					}
					this.selection = item.park_num
				}
			},
			// 取消车位
			minus() {
				this.selection = ''
				for (let i = 0; i < this.stall.length; i++) {
					this.stall[i].status = 0
				}
			},

			gotoStall() {
				// console.log(this.selection,this.stallNotActive)
				if (this.stallNotActive.indexOf(this.selection) != -1) {
					this.$u.route('pages/stall/stall', {
						selection: this.selection,
						start_time: this.start_time,
						end_time: this.end_time
					})
				} else {
					this.selection = '请先选择预定的车位'
				}
			},
			// 确定开始时间
			confirmStart(params) {
				const now = new Date()
				// console.log(now.getFullYear(), now.getMonth() + 1, now.getDate(), now.getHours(), now.getMinutes(), now
				// 	.getSeconds())
				if (params.year > now.getFullYear() || params.month > (now.getMonth() + 1) || params.day > now.getDate() ||
					params.hour > now.getHours() || params.minute > now.getMinutes() || params.second > now.getSeconds()) {
					this.startParams = params
					// console.log(this.startParams)
					const start = ''
					this.start_time = start.concat(params.year, '-', params.month, '-', params.day, ' ', params
						.hour, ':', params.minute, ':', params.second)
					this.defaultEndTime = start.concat(params.year, '-', params.month, '-', params.day, ' ', params
						.hour, ':', params.minute, ':', params.second)
					this.startTimeHM = this.start_time.slice(11, 16)
					this.startTimeY = this.start_time.slice(0, 4)
					this.startTimeMD = this.start_time.slice(5, 10)
					if (!(this.start_time == '' || this.end_time == '')) {
						this.selection = ''
					}
				} else {
					this.$refs.uToast.show({
						title: '开始时间不能小于当前时间',
						type: 'warning',
					})
				}
			},
			// 确定结束时间
			confirmEnd(params) {
				if (!this.startParams) {
					this.$refs.uToast.show({
						title: '请先选择开始时间',
						type: 'warning',
					})
				} else {
					if (params.year > this.startParams.year || params.month > this.startParams.month || params.day > this
						.startParams.day ||
						params.hour > this.startParams.hour || params.minute > this.startParams.minute || params.second >
						this.startParams
						.second) {
						const end = ''
						this.end_time = end.concat(params.year, '-', params.month, '-', params.day, ' ', params
							.hour, ':', params.minute, ':', params.second)
						this.endTimeHM = this.end_time.slice(11, 16)
						this.endTimeY = this.end_time.slice(0, 4)
						this.endTimeMD = this.end_time.slice(5, 10)
						if (!(this.start_time == '' || this.end_time == '')) {
							this.selection = ''
						}
						this.$u.api.inquireBooking({
							start_time: this.start_time,
							end_time: this.end_time
						}).then(res => {
							this.stall = res.data
							this.stallNotActive = []
							for (let i = 0; i < this.stall.length; i++) {
								this.stall[i].status = 0
								this.stallNotActive.splice(0, 0, this.stall[i].park_num)
							}

						})
					} else {
						this.$refs.uToast.show({
							title: '结束时间不能小于开始时间',
							type: 'warning',
						})
					}
				}


			},
		},
		computed: {
			settime: function() {


			}
		},
		onLoad() {
			this.getStall()
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-flow: wrap;
		justify-content: center;
		align-items: flex-start;
		width: 100%;
		// height: 800rpx;
		overflow-y: scroll;
		max-height: 800rpx;
		background-color: #FFFFFF;

		.stall {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 158rpx;
			height: 180rpx;
			// border: $base-color solid 2rpx;
			border-radius: 20rpx;
			background-color: #FFFFFF;
			margin: 15rpx 15rpx;

			image {
				width: 128rpx;
				height: 150rpx;
			}
		}
	}

	.tips {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 100rpx;
		// margin-top: 60rpx;

		.icon {
			display: flex;
			align-items: center;
		}

		.gray {
			height: 30rpx;
			width: 30rpx;
			background-color: #cdcdcd
		}

		.blue {
			height: 30rpx;
			width: 30rpx;
			background-color: $base-color;
		}
	}


	.time {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 100rpx;
		margin: 0 5% 20rpx 5%;
		background-color: #FFFFFF;

		.beforeStart,
		.beforeEnd {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 220rpx;
			height: 60rpx;
			font-size: 32rpx;
			border: 2rpx solid black;
			border-radius: 10rpx;
		}

		.afterStart,
		.afterEnd {
			flex: 1;
			display: grid;
			grid-template-columns: 2fr 1fr;
			grid-template-rows: 1fr 1fr;
			grid-template-areas: 'a b'
				'a c';
			grid-gap: 5rpx;
		}

		.HM {
			// grid-area: ;
			grid-area: a;
			place-self: center center;
			font-size: 60rpx;
			// background-color: #007AFF;
		}

		.year {
			grid-area: b;
			place-self: end center;
			font-size: 20rpx;
			color: #999999;
		}

		.MD {
			grid-area: c;
			place-self: start center;
			font-size: 20rpx;
			color: #999999;
		}


	}

	.footer {
		height: 330rpx;
		margin-top: 30rpx;
		display: flex;
		flex-flow: column;
		justify-content: space-evenly;
		background-color: #FFFFFF;
		border-radius: 30rpx;
		margin: 0 5%;

		.info {
			display: flex;
			align-items: center;

			.stallInfo {
				margin-left: 30rpx;

				.stall {
					font-size: 40rpx;
					font-weight: bold;
				}

				.text {
					color: #999999;
					margin-top: 5rpx;
				}

			}

			.minus {
				margin: 0 30rpx 0 auto;

				image {
					height: 40rpx;
					width: 40rpx;
				}
			}
		}

		.button {
			width: 100%;
			height: 100rpx;
			border-radius: 30rpx;
		}
	}
</style>
